<template>
	<view class="content">
		<view class="top">
			<input type="text" v-model="files_name" placeholder="请输入关键词" placeholder-class="inputDefault" @input="searchName"/>
			<view class="pop" :class="sortIf?'name_active':''" @tap="sortClick">状态<i class="iconfont iconxiala" :class="sortIf?'i_active':''"></i></view>
			<view class="pop" :class="typeIf?'name_active':''" @tap="typeClick">类型<i class="iconfont iconxiala" :class="typeIf?'i_active':''"></i></view>
		</view>
		<view class="popCont" v-show="sortIf" @tap="closeNavSwitch" @touchmove.stop.prevent=''>
			<view class="popItem" v-for="(item,index) in sortList" :key="index" @tap.stop="sortItem(item.state,index)">
				<view :class="[index == sortIndex ? 'name_active' : '']">{{item.name}}</view>
				<i v-if="index == sortIndex" class="iconfont iconduigou"></i>
			</view>
		</view>
		<view class="popCont" v-show="typeIf" @tap="closeNavSwitch" @touchmove.stop.prevent=''>
			<view class="popItem" v-for="(item,index) in typeList" :key="index" @tap.stop="typeItem(item.type,index)">
				<view :class="[index == typeIndex ? 'name_active' : '']">{{item.name}}</view>
				<i v-if="index == typeIndex" class="iconfont iconduigou"></i>
			</view>
		</view>
		<view class="none" v-if="dataList.length == 0">没有数据</view>
		<view class="cont" v-else>
			<view class="item" v-for="(item,index) in dataList" :key="index" :data-index="index" @longpress="onLongpress" @tap="detail(item.tid,item.files_name,item.files_type,item.star_num)">
				<view class="itemTop">
					<view class="name">
						<i v-show="item.files_type == 2" class="iconfont iconshipinziyuan"></i>
						<i v-show="item.files_type == 1" class="iconfont iconwendangziyuan"></i>
						<i v-show="item.files_type == 3" class="iconfont iconyinpinziyuan"></i>
						{{item.files_name}}
					</view>
					<view class="noPath" v-if="item.state == 3" @tap.stop="changeState(item.tid,1,index)">未通过</view>
					<view class="inAudit" v-if="item.state == 1" @tap.stop="changeState(item.tid,2,index)">审核中</view>
					<view class="inAudit" v-if="item.state == 0" @tap.stop="changeState(item.tid,1,index)">未审核</view>
					<view class="fraction" v-if="item.state == 2">{{item.star_num}}</view>
				</view>
				<view class="itemBottom">
					<view class="state">
						<view>已售{{item.purchase_num}}</view>
						<view>查看{{item.watch_num}}</view>
					</view>
					<view class="price" v-show="item.is_pay == 0">免费</view>
					<view class="price" v-show="item.is_pay == 1">￥{{item.pay_cion}}</view>
					<view class="price2" v-show="item.is_exemption == 1">限时7天免费</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="dataList.length > 7" :status="status" :content-text="contentText" />
		<view class="shade" v-show="shadeIf" @tap="closeNavSwitch">
			<view class="shadeItem" :style="popStyle" @tap.stop="isDelete">
				<view>删除此资源</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default{
		components: {
			uniLoadMore
		},
		data() {
			return {
				dataList: [],
				sortList: [
					{'name':'全部',state:''},
					{'name':'未审核',state:0},
					{'name':'审核中',state:1},
					{'name':'已通过',state:2},
					{'name':'未通过',state:3}
				],
				sortIndex: 0,
				sortIf: false,
				typeList: [
					{'name':'全部',type: ''},
					{'name':'视频',type: 2},
					{'name':'音频',type: 3},
					{'name':'文档',type: 1}
				],
				typeIndex: 0,
				typeIf: false,
				files_type: '', //资源类型
				files_name: '', //资源名称
				state: '' ,//资源状态
				page: 1,
				status: 'more',
				reload: true,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				winSize: {},/* 窗口尺寸 */
				popStyle: "",/* 弹窗定位样式 */
				shadeIf: false,
				activeIndex: ''
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: 'index'
			})
		},
		onPullDownRefresh() {
			this.reload = true;
			this.page = 1;
			this.getAll();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = this.page + 1;
			var _this = this;
			setTimeout(function(){
				_this.getAll();
			},500);
		},
		onShow() {
			this.reload = true;
			this.page = 1;
			this.getAll();
		},
		onLoad() {
			this.getWindowSize();
		},
		methods:{
			/* 查看我的资源 */
			getAll() {
				var data = {
					page: this.page,
					pagesize: 8
				}
				if(this.files_type) {
					data.files_type = this.files_type
				}
				if(this.files_name) {
					data.files_name = this.files_name
				}
				if(this.sortIndex != 0) {
					data.state = this.sortList[this.sortIndex].state
				}
				this.$zapi.apiPost('user/resources.lists/ReslistByOne',data).then(res=>{
					if(res.data.code == 200) {
						var list = res.data.data.data;
						this.dataList = this.reload ? list : this.dataList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if(this.reload){
							this.dataList = [];
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}else{
							this.status='noMore';	
						}
					}
				})
			},
			/* 搜索资源名称 */
			searchName(){
				this.reload = true;
				this.page = 1;
				this.getAll();
			},
			/* 状态伸展 */
			sortClick() {
				this.sortIf = !this.sortIf;
				this.typeIf = false;
			},
			/* 状态切换 */
			sortItem(state,index) {
				this.sortIndex = index;
				this.sortIf = false;
				this.state = state;
				this.reload = true;
				this.page = 1;
				this.getAll();
			},
			/* 类型伸展 */
			typeClick() {
				this.typeIf = !this.typeIf;
				this.sortIf = false;
			},
			/* 类型切换 */
			typeItem(type,index) {
				this.typeIndex = index;
				this.typeIf = false;
				this.files_type = type;
				this.reload = true;
				this.page = 1;
				this.getAll();
			},
			/* 关闭蒙版 */
			closeNavSwitch() {
				this.sortIf = false;
				this.typeIf = false;
				this.shadeIf = false;
			},
			/* 长按后离开事件 */
			onLongpress(e){
				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];
				
				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:${this.winSize.witdh-touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}
				
				this.popStyle = style;
				this.shadeIf = true;
				this.activeIndex = Number(index);
			},
			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 删除资源 */
			isDelete() {
				var _this = this;
				_this.shadeIf = false;
				uni.showModal({
					// title: '删除提示？',
					content: '确定要删除此资源吗？',
					confirmColor: '#FFB800',
					success: (res) => {
						if(res.confirm) {
							var data = {
								tid: _this.dataList[_this.activeIndex].tid
							}
							_this.$zapi.apiPost('user/resources.lists/Resdelete',data).then(res=>{
								if(res.data.code==200){
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									this.reload = true;
									this.page = 1;
									this.getAll();
								} else{
									uni.showToast({
										title: '删除失败',
										icon: 'none'
									})
								}
								_this.$forceUpdate();
							})
						}
					}
				})
			},
			/* 改变状态 */
			changeState(tid,state,index){
				var data = {
					tid: tid,
					updata_state: state
				}
				this.$zapi.apiPost('user/resources.lists/ResStateUser',data).then(res=>{
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
					if(data.updata_state == 1) {
						this.dataList[index].state = 1;
					} else {
						this.dataList[index].state = 0;
					}
				})
			},
			/* 跳转资源详情 */
			detail(tid, name, type, num) {
				uni.navigateTo({
					url: 'resources_Detail?tid=' + tid + '&name=' + name + '&type=' + type + '&num=' + num
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #FAFAFA;
	}
	.top{
		width: 100%;
		height: 88upx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		display: flex;
		justify-content: flex-start;
	}
	.top input{
		width: 380upx;
		line-height: 1;
		background-color: #FAFAFA;
		margin-top: 20upx;
		margin-left: 30upx;
		border-radius: 12upx;
	}
	.inputDefault{
		color: #999999;
		font-size: 30upx;
		text-align: center;
		background-image: url('../../static/image/search.png');
		background-repeat: no-repeat; 
		background-position: 20% 50%;
		background-size: 8%; 
	}
	.pop{
		width: 110upx;
		margin: 0 30upx;
		line-height: 88upx;
		display: flex;
		justify-content: space-between;
		color: #333333;
		font-size: 34upx;
	}
	.pop i{
		color: #999999;
		line-height: 88upx;
	}
	.popCont{
		position: fixed;
		top: 88upx;
		width: 100%;
		height: calc(100% - 88upx);
		background-color: rgba(0,0,0,.5);
	}
	.popItem{
		display: flex;
		justify-content: space-between;
		height: 88upx;
		padding: 0 30upx;
		background-color: #FFFFFF;
		border-top: 2upx solid #E5E5E5;
	}
	.popItem view{
		line-height: 88upx;
		color: #666666;
		font-size: 30upx;
	}
	.popItem i {
		line-height: 88upx;
		color: #FF9900;
	}
	.name_active{
		color: #FF9900 !important;
	}
	.i_active{
		color: #FF9900 !important;
		transform: rotate(180deg);
	}
	.cont{
		margin-top: 118upx;
		background-color: #FAFAFA;
		z-index: 1;
	}
	.item{
		width: 690upx;
		margin: 30upx auto 20upx;
		background-color: #FFFFFF;
	}
	.itemTop{
		display: flex;
		justify-content: space-between;
		padding: 30upx;
	}
	.name{
		display: flex;
		justify-content: flex-start;
		color: #333333;
		font-size: 36upx;
		line-height: 1.2;
	}
	.name i{
		color: #00ACFE;
		font-size: 40upx;
		line-height: 1;
		margin-right: 10upx;
	}
	.name .iconyinpinziyuan{
		font-size: 50upx;
		line-height: 0.8;
	}
	.noPath{
		color: #FF5722;
		font-size: 32upx;
		line-height: 1.2;
		white-space: nowrap;
	}
	.inAudit{
		color: #999999;
		font-size: 32upx;
		line-height: 1.2;
		white-space: nowrap;
	}
	.fraction{
		color: #00ACFE;
		font-size: 36upx;
		line-height: 1.2;
		white-space: nowrap;
	}
	.itemBottom{
		display: flex;
		justify-content: space-between;
	}
	.state{
		display: flex;
		justify-content: flex-start;
		color: #666666;
		font-size: 28upx;
		line-height: 1.2;
		margin-left: 30upx;
	}
	.state view{
		margin-right: 20upx;
	}
	.price{
		width: 114upx;
		height: 66upx;
		line-height: 66upx;
		text-align: center;
		background: rgba(255,153,0,0.1);
		border-radius: 17px 0px 4px 0px;
		color: #FF9900;
		font-size: 28upx;
	}
	.price2{
		width:198upx;
		height:42upx;
		line-height: 42upx;
		text-align: center;
		text-indent: 24upx;
		margin-top: 24upx;
		color: #FFFFFF;
		font-size: 26upx;
		background-image: url('../../static/image/free.png');
		background-size: 100% 100%;
		opacity:1;
	}
	.none{
		color: #999999;
		text-align: center;
		margin-top: 200upx;
		font-size: 36upx;
	}
	.shade{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;
		z-index: 100;
	}
	.shadeItem{
		position: fixed;
		z-index: 101;
		width: auto;
		box-sizing: border-box;
		text-align: left;
		color: #333;
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
		line-height: 80upx;
		transition: transform 0.15s ease-in-out 0s;
		user-select: none;
		-webkit-touch-callout: none;
		transform: scale(1, 1);
	}
	.shadeItem view{
		padding: 20upx 40upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		user-select: none;
		-webkit-touch-callout: none;
	}
</style>
